<template>
	<view>
		<up-overlay :show="value" class="LoadingOverlay" :style="{ backgroundColor: maskBackgroundColor }">
			<view class="wrapper">
				<view class="block_1 x-f">
					<view class="block_1_left x-c">
						<view v-if="loaderActive === 'loading'" class="loader"></view>
						<view v-else-if="loaderActive === 'success'" class="x-c">
							<slot name="icon">
								<image src="/uni_modules/mc-ui/static/image/success.png" style="width:16px;height:16px;"
									mode="scaleToFill" alt="成功图标" />
							</slot>
						</view>
						<view class="x-f" style="margin-left: 6px;min-width: 60px;font-size: 14px;">
							<text>{{ text }}</text>
						</view>
					</view>

					<view v-if="showClose" class="block_1_right x-c" @tap="close">
						<uni-icons type="closeempty" size="24" color="#636466"></uni-icons>
					</view>
				</view>
			</view>
		</up-overlay>
	</view>
</template>

<script setup lang="ts" name="m-loading">
	// 无需导入defineProps和defineEmits，它们是Vue3的编译器宏
	const props = defineProps({
		maskBackgroundColor: {
			type: String,
			default: 'rgba(0,0,0,0.5)'
		},
		value: {
			type: Boolean,
			default: false
		},
		text: {
			type: String,
			default: '正在处理...'
		},
		showClose: {
			type: Boolean,
			default: true
		},
		loaderActive: {
			type: String as () => 'loading' | 'success',
			default: 'loading'
		}
	})

	const emit = defineEmits<{
		(e : 'close') : void
		(e : 'input', value : false) : void
	}>()

	const close = () => {
		emit('close')
		emit('input', false) // 支持v-model双向绑定
	}
</script>

<style lang="scss" scoped>
	.LoadingOverlay {
		z-index: 999999;

	}

	.wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;

		.block {
			width: 210px !important;
			border-radius: 12px !important;
			background: #4d4d4d !important;
			text-align: center;
			color: #fff;
			padding: 0 0 15px;

			.LoadingBox {
				position: relative;
				width: 210px !important;
				height: 100px !important;

				.TheLoading {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);

					.spinner-6 {
						width: 60px;
						aspect-ratio: 1;
						display: grid;
						-webkit-mask: conic-gradient(from 15deg, #0000, #000);
						animation: s6 1s infinite steps(12);
					}
				}
			}
		}

		.block_1 {
			width: 400px;
			max-width: 60vw;
			height: 50px;
			border-radius: 6px;
			overflow: hidden;
			box-shadow: 1px 1px 13px -7px #999;
			background-color: #ebecee;

			&_left {
				height: 100%;
				flex: 1;
				font-weight: 600;
			}

			&_right {
				width: 60px;
				height: 100%;
				border-left: 1px solid #a8a8aa;
			}
		}
	}


	.spinner-6,
	.spinner-6:before,
	.spinner-6:after {
		background:
			radial-gradient(closest-side at 50% 12.5%,
				#f03355 96%, #0000) 50% 0/20% 80% repeat-y,
			radial-gradient(closest-side at 12.5% 50%,
				#f03355 96%, #0000) 0 50%/80% 20% repeat-x;
	}

	.spinner-6:before,
	.spinner-6:after {
		content: "";
		grid-area: 1/1;
		transform: rotate(30deg);
	}

	.spinner-6:after {
		transform: rotate(60deg);
	}

	@keyframes s6 {
		100% {
			transform: rotate(1turn)
		}
	}

	.loader {
		zoom: 0.5;
		animation: rotate 1s infinite;
		height: 50px;
		width: 50px;
	}

	.loader:before,
	.loader:after {
		border-radius: 50%;
		content: '';
		display: block;
		height: 20px;
		width: 20px;
	}

	.loader:before {
		animation: ball1 1s infinite;
		background-color: #cb2025;
		box-shadow: 30px 0 0 #f8b334;
		margin-bottom: 10px;
	}

	.loader:after {
		animation: ball2 1s infinite;
		background-color: #00a096;
		box-shadow: 30px 0 0 #97bf0d;
	}

	@keyframes rotate {
		0% {
			-webkit-transform: rotate(0deg) scale(0.8);
			-moz-transform: rotate(0deg) scale(0.8);
		}

		50% {
			-webkit-transform: rotate(360deg) scale(1.2);
			-moz-transform: rotate(360deg) scale(1.2);
		}

		100% {
			-webkit-transform: rotate(720deg) scale(0.8);
			-moz-transform: rotate(720deg) scale(0.8);
		}
	}

	@keyframes ball1 {
		0% {
			box-shadow: 30px 0 0 #f8b334;
		}

		50% {
			box-shadow: 0 0 0 #f8b334;
			margin-bottom: 0;
			-webkit-transform: translate(15px, 15px);
			-moz-transform: translate(15px, 15px);
		}

		100% {
			box-shadow: 30px 0 0 #f8b334;
			margin-bottom: 10px;
		}
	}

	@keyframes ball2 {
		0% {
			box-shadow: 30px 0 0 #97bf0d;
		}

		50% {
			box-shadow: 0 0 0 #97bf0d;
			margin-top: -20px;
			-webkit-transform: translate(15px, 15px);
			-moz-transform: translate(15px, 15px);
		}

		100% {
			box-shadow: 30px 0 0 #97bf0d;
			margin-top: 0;
		}
	}
</style>